import React, { useRef } from 'react';
import { useFrame } from '@react-three/fiber';
import { Box, Cylinder, Sphere, Cone } from '@react-three/drei';
import * as THREE from 'three';

interface OutdoorTableSetProps {
  position: [number, number, number];
  rotation?: number;
}

export const OutdoorTableSet: React.FC<OutdoorTableSetProps> = ({ 
  position, 
  rotation = 0 
}) => {
  const tableRef = useRef<THREE.Group>(null);

  useFrame((state) => {
    if (tableRef.current) {
      // Subtle animation
      tableRef.current.position.y = position[1] + Math.sin(state.clock.elapsedTime * 0.5 + position[0]) * 0.02;
    }
  });

  return (
    <group ref={tableRef} position={position} rotation={[0, rotation, 0]}>
      {/* Table Base - Ornate Cast Iron Style */}
      <group position={[0, 0.4, 0]}>
        {/* Central Column */}
        <Cylinder
          position={[0, 0, 0]}
          args={[0.08, 0.12, 0.8]}
          castShadow
        >
          <meshStandardMaterial 
            color="#2F4F4F" 
            metalness={0.8} 
            roughness={0.3}
          />
        </Cylinder>

        {/* Decorative Base */}
        <Cylinder
          position={[0, -0.35, 0]}
          args={[0.35, 0.35, 0.1]}
          castShadow
        >
          <meshStandardMaterial color="#2F4F4F" metalness={0.8} roughness={0.3} />
        </Cylinder>

        {/* Ornate Legs */}
        {Array.from({ length: 4 }, (_, i) => {
          const angle = (i * Math.PI) / 2;
          return (
            <group key={i} rotation={[0, angle, 0]}>
              <Box
                position={[0.25, -0.2, 0]}
                args={[0.03, 0.4, 0.03]}
                castShadow
              >
                <meshStandardMaterial color="#2F4F4F" metalness={0.8} />
              </Box>
              {/* Decorative Scroll */}
              <Sphere
                position={[0.25, -0.1, 0]}
                args={[0.02]}
                castShadow
              >
                <meshStandardMaterial color="#DAA520" metalness={0.9} roughness={0.1} />
              </Sphere>
            </group>
          );
        })}
      </group>

      {/* Table Top - Marble Effect */}
      <Cylinder
        position={[0, 0.83, 0]}
        args={[0.6, 0.6, 0.06, 20]}
        castShadow
        receiveShadow
      >
        <meshStandardMaterial 
          color="#F8F8FF" 
          roughness={0.1}
          metalness={0.2}
        />
      </Cylinder>

      {/* Table Top Edge Detail */}
      <Cylinder
        position={[0, 0.86, 0]}
        args={[0.62, 0.58, 0.02, 20]}
        castShadow
      >
        <meshStandardMaterial color="#E6E6FA" roughness={0.2} />
      </Cylinder>

      {/* Coffee Service */}
      <group position={[0.2, 0.89, 0.1]}>
        {/* Coffee Cup 1 */}
        <group>
          <Cylinder args={[0.04, 0.035, 0.06]} castShadow>
            <meshStandardMaterial color="#FFF8DC" roughness={0.3} />
          </Cylinder>
          <Cylinder position={[0, 0.01, 0]} args={[0.038, 0.038, 0.02]} castShadow>
            <meshStandardMaterial color="#8B4513" />
          </Cylinder>
          {/* Handle */}
          <Cylinder 
            position={[0.05, 0, 0]} 
            args={[0.01, 0.01, 0.04]}
            rotation={[Math.PI/2, 0, 0]}
          >
            <meshStandardMaterial color="#FFF8DC" />
          </Cylinder>
          {/* Saucer */}
          <Cylinder position={[0, -0.04, 0]} args={[0.06, 0.06, 0.005]} receiveShadow>
            <meshStandardMaterial color="#FFF8DC" />
          </Cylinder>
        </group>
      </group>

      {/* Coffee Cup 2 */}
      <group position={[-0.15, 0.89, -0.1]}>
        <Cylinder args={[0.04, 0.035, 0.06]} castShadow>
          <meshStandardMaterial color="#FFF8DC" roughness={0.3} />
        </Cylinder>
        <Cylinder position={[0, 0.01, 0]} args={[0.038, 0.038, 0.02]} castShadow>
          <meshStandardMaterial color="#8B4513" />
        </Cylinder>
        <Cylinder 
          position={[0.05, 0, 0]} 
          args={[0.01, 0.01, 0.04]}
          rotation={[Math.PI/2, 0, 0]}
        >
          <meshStandardMaterial color="#FFF8DC" />
        </Cylinder>
        <Cylinder position={[0, -0.04, 0]} args={[0.06, 0.06, 0.005]} receiveShadow>
          <meshStandardMaterial color="#FFF8DC" />
        </Cylinder>
      </group>

      {/* Sugar Bowl */}
      <Sphere
        position={[0, 0.91, -0.25]}
        args={[0.03]}
        castShadow
      >
        <meshStandardMaterial color="#FFB6C1" roughness={0.2} metalness={0.1} />
      </Sphere>

      {/* Small Cake Plate */}
      <group position={[-0.25, 0.89, 0.2]}>
        <Cylinder args={[0.08, 0.08, 0.005]} castShadow>
          <meshStandardMaterial color="#FFF8DC" />
        </Cylinder>
        {/* Mini Cake */}
        <Cylinder position={[0, 0.015, 0]} args={[0.025, 0.025, 0.025]} castShadow>
          <meshStandardMaterial color="#DEB887" />
        </Cylinder>
        {/* Cherry on top */}
        <Sphere position={[0, 0.035, 0]} args={[0.008]} castShadow>
          <meshStandardMaterial color="#DC143C" />
        </Sphere>
      </group>

      {/* Menu Holder */}
      <group position={[0.3, 0.89, -0.2]}>
        <Box args={[0.02, 0.08, 0.06]} castShadow>
          <meshStandardMaterial color="#2F4F4F" metalness={0.8} />
        </Box>
        <Box position={[0.01, 0, 0]} args={[0.005, 0.06, 0.04]} castShadow>
          <meshStandardMaterial color="#FFFAF0" />
        </Box>
      </group>

      {/* Chairs - Set of 2 */}
      {[
        { pos: [0.9, 0, 0], rot: -Math.PI/2 },
        { pos: [-0.9, 0, 0], rot: Math.PI/2 }
      ].map((chair, index) => (
        <group key={index} position={chair.pos} rotation={[0, chair.rot, 0]}>
          {/* Chair Seat */}
          <Box
            position={[0, 0.4, 0]}
            args={[0.35, 0.03, 0.35]}
            castShadow
            receiveShadow
          >
            <meshStandardMaterial color="#8B4513" roughness={0.6} />
          </Box>

          {/* Chair Back */}
          <Box
            position={[0, 0.65, -0.16]}
            args={[0.35, 0.5, 0.03]}
            castShadow
          >
            <meshStandardMaterial color="#8B4513" roughness={0.6} />
          </Box>

          {/* Decorative Back Slats */}
          {Array.from({ length: 3 }, (_, i) => (
            <Box
              key={i}
              position={[-0.1 + i * 0.1, 0.65, -0.14]}
              args={[0.02, 0.3, 0.01]}
              castShadow
            >
              <meshStandardMaterial color="#654321" />
            </Box>
          ))}

          {/* Chair Legs */}
          {[
            [-0.15, -0.15],
            [0.15, -0.15], 
            [-0.15, 0.15],
            [0.15, 0.15]
          ].map((legPos, i) => (
            <Cylinder
              key={i}
              position={[legPos[0], 0.2, legPos[1]]}
              args={[0.015, 0.015, 0.4]}
              castShadow
            >
              <meshStandardMaterial color="#654321" roughness={0.8} />
            </Cylinder>
          ))}

          {/* Chair Arm Rests */}
          <Box
            position={[-0.2, 0.5, 0]}
            args={[0.05, 0.03, 0.25]}
            castShadow
          >
            <meshStandardMaterial color="#8B4513" />
          </Box>
          <Box
            position={[0.2, 0.5, 0]}
            args={[0.05, 0.03, 0.25]}
            castShadow
          >
            <meshStandardMaterial color="#8B4513" />
          </Box>

          {/* Seat Cushion */}
          <Box
            position={[0, 0.44, 0]}
            args={[0.3, 0.04, 0.3]}
            castShadow
          >
            <meshStandardMaterial color="#FFB6C1" roughness={0.8} />
          </Box>
        </group>
      ))}

      {/* Table Umbrella */}
      <group position={[0, 0.9, 0]}>
        {/* Umbrella Pole */}
        <Cylinder
          position={[0, 1.2, 0]}
          args={[0.015, 0.015, 2.4]}
          castShadow
        >
          <meshStandardMaterial color="#2F4F4F" metalness={0.8} />
        </Cylinder>

        {/* Umbrella Top */}
        <Cone
          position={[0, 2.4, 0]}
          args={[1.2, 0.6, 8]}
          castShadow
        >
          <meshStandardMaterial 
            color="#FF6347" 
            roughness={0.7}
            side={THREE.DoubleSide}
          />
        </Cone>

        {/* Umbrella Stripes */}
        {Array.from({ length: 8 }, (_, i) => (
          <Box
            key={i}
            position={[
              Math.cos((i * Math.PI * 2) / 8) * 0.6,
              2.3,
              Math.sin((i * Math.PI * 2) / 8) * 0.6
            ]}
            args={[0.02, 0.1, 0.5]}
            rotation={[0, (i * Math.PI * 2) / 8, 0]}
          >
            <meshStandardMaterial color="#FFFFFF" />
          </Box>
        ))}
      </group>
    </group>
  );
};